<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Upload 上传1</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
.upload-list-inline .ant-upload-list-item-container{
	float: left;
}
.upload-list-inline .ant-upload-list-item{
	float: left;
	width: 200px;
	margin-right: 8px;
}
</style>
<body>

<div id="app">
	<a-affix :offset-top="10"><div id="upload_links"></div></a-affix><script src="links.js"></script><script>upload_link();</script>
	
	<a-divider class="a-divi" orientation="left">点击上传</a-divider><!-- =============================================================== -->
	<p class="desc">经典款式，用户点击按钮弹出文件选择框。</p>
	<a-space>
		<a-upload v-model:file-list="fileList1_1" name="file" action="http://oa.qiqiao.com/common/common/uploaddemo"
			:headers="headers1" @change="handleChange1">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined>Click to Upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">已上传的文件列表</a-divider><!-- =============================================================== -->
	<p class="desc">使用 fileList 设置已上传的内容。</p>
	<a-space>
		<a-upload v-model:file-list="fileList2_1" action="http://oa.qiqiao.com/common/common/uploaddemo">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">完全控制的上传列表</a-divider><!-- =============================================================== -->
	<p class="desc">使用 fileList 对列表进行完全控制，可以实现各种自定义功能，以下演示二种情况：1、上传列表数量的限制。2、读取远程路径并显示链接。</p>
	<a-space>
		<a-upload :file-list="fileList3_1" action="http://oa.qiqiao.com/common/common/uploaddemo" :multiple="true" @change="handleChange3">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">图片列表样式</a-divider><!-- =============================================================== -->
	<p class="desc">上传文件为图片，可展示本地缩略图。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList4_1" action="http://oa.qiqiao.com/common/common/uploaddemo" list-type="picture">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> upload
			</a-button>
		</a-upload>
		<br />
		<br />
		<a-upload v-model:file-list="fileList4_2" action="http://oa.qiqiao.com/common/common/uploaddemo" list-type="picture" class="upload-list-inline">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">文件夹上传</a-divider><!-- =============================================================== -->
	<p class="desc">支持上传一个文件夹里的所有文件。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList5_1" action="http://oa.qiqiao.com/common/common/uploaddemo" directory list-type="picture">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload Directory
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">上传前转换文件</a-divider><!-- =============================================================== -->
	<p class="desc">使用 beforeUpload 转换上传的文件（例如添加水印）【实测发现还真能写水印进入】。</p>
	<p class="desc">实际使用中，这个 beforeUpload 多用于检测文件类型和文件大小，不符合标准的可以在这里阻止上传。</p>
	<p class="desc">【注意：要阻止的，返回 Upload.LIST_IGNORE 。参考下面的“只上传 png 图片”和“用户头像”例子】</p>
	<p class="desc">可以参照：/a000000000/my/element/form/Upload.html 的用户头像上传 beforeAvatarUpload()</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList6_1" action="http://oa.qiqiao.com/common/common/uploaddemo" :before-upload="beforeUpload6">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">限制数量</a-divider><!-- =============================================================== -->
	<p class="desc">通过 maxCount 限制上传数量。当为 1 时，始终用最新上传的代替当前。</p>
	<p class="desc">当大于 1 时，例如3，则达到最大数量时，不能上传了，但如果想做成新上传的覆盖最早的一个，可以考虑上面的例子：完全控制的上传列表。</p>
	<a-space direction="vertical" style="width: 800px" size="large">
		<a-upload v-model:file-list="fileList7_1" list-type="picture" :max-count="1" action="http://oa.qiqiao.com/common/common/uploaddemo">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload (Max: 1)
			</a-button>
		</a-upload>
		<a-upload v-model:file-list="fileList7_2" list-type="picture" :max-count="3" action="http://oa.qiqiao.com/common/common/uploaddemo">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload (Max: 3)
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">只上传 png 图片</a-divider><!-- =============================================================== -->
	<p class="desc">beforeUpload 返回 false 或 Promise.reject 时，只用于拦截上传行为，不会阻止文件进入上传列表（原因）。</p>
	<p class="desc">如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。</p>
	<a-space direction="vertical" style="width: 800px" size="large">
		<a-upload v-model:file-list="fileList8_1" action="http://oa.qiqiao.com/common/common/uploaddemo" :before-upload="beforeUpload8" @change="handleChange1">
			<a-button>
				<upload-outlined class="ant-icon" style="margin-right: 4px;"></upload-outlined> Upload png only
			</a-button>
		</a-upload>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">用户头像</a-divider><!-- =============================================================== -->
	<p class="desc">点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小。</p>
	<p class="desc">beforeUpload 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等：可参考react版本示例。</p>
	<p class="desc">第一个例子是通过getBase64()把上传的文件转化为base64数据显示出来（即使图片没有上传到服务器，这里也能显示数据）</p>
	<p class="desc">第二个例子，是图片上传成功后，显示服务器上的图片。可以查看一下网页元素，img.src的值。</p>
	<p class="desc">推荐使用第二种方式，因为这样做看到图片，表示图片已经成功上传到服务器。</p>
	<a-space direction="vertical" style="width: 800px">
		<a-upload v-model:file-list="fileList9_1" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
			action="http://oa.qiqiao.com/common/common/uploaddemo" :before-upload="beforeUpload9" @change="handleChange9_1">
			<img v-if="imageUrl9_1" :src="imageUrl9_1" alt="avatar" width="100%" heigth="100%" />
			<div v-else>
				<loading-outlined v-if="loading9_1" spin class="ant-icon"></loading-outlined>
				<plus-outlined v-else class="ant-icon"></plus-outlined>
				<div class="ant-upload-text">Upload</div>
			</div>
		</a-upload>
		<a-upload v-model:file-list="fileList9_2" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
			action="http://oa.qiqiao.com/common/common/uploaddemo" :before-upload="beforeUpload9" @change="handleChange9_2">
			<img v-if="imageUrl9_2" :src="imageUrl9_2" alt="avatar" width="100%" heigth="100%" />
			<div v-else>
				<loading-outlined v-if="loading9_2" spin class="ant-icon"></loading-outlined>
				<plus-outlined v-else class="ant-icon"></plus-outlined>
				<div class="ant-upload-text">Upload</div>
			</div>
		</a-upload>
	</a-space>
	
	
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const message = antd.message;
const img = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
function getBase64(img, callback) {
	const reader = new FileReader();
	reader.addEventListener('load', () => callback(reader.result));
	reader.readAsDataURL(img);
}
// const domain = 'http://oa.qiqiao.com/uploads/uploaddemo/20241111/6d9c4aa6e338a50f309bed73dda276ce.png';
const domain = 'http://oa.qiqiao.com/uploads/uploaddemo/';
const Main = {
data() {
	return {
		fileIndex: 1,
		fileList1_1: [],
		// headers1: {authorization: 'authorization-text',},
		// headers1: {},
		headers1: {'X-Requested-With':null},
		
		fileList2_1: [
			{uid: '1',name: 'xxx.png',status: 'done',url: 'http://www.baidu.com/xxx.png',response: 'Server Error 500',},
			{uid: '2',name: 'yyy.png',status: 'done',url: 'http://www.baidu.com/yyy.png',},
			{uid: '3',name: 'zzz.png',status: 'error',url: 'http://www.baidu.com/zzz.png',response: 'Server Error 500',},
		],
		
		fileList3_1: [
			{uid: '-1',name: 'yyy.png',status: 'done',url: img, thumbUrl: img,},
		],
		
		fileList4_1: [
			{uid: '-1',name: 'xxx.png',status: 'done',url: img, thumbUrl: img,},
			{uid: '-2',name: 'yyy.png',status: 'done',url: img, thumbUrl: img,},
		],
		fileList4_2: [
			{uid: '-1',name: 'xxx.png',status: 'done',url: img, thumbUrl: img,},
			{uid: '-2',name: 'yyy.png',status: 'done',url: img, thumbUrl: img,},
		],
		
		fileList5_1: [],
		fileList6_1: [],
		fileList7_1: [],
		fileList7_2: [],
		fileList8_1: [],
		
		fileList9_1: [],
		fileList9_2: [],
		loading9_1: false,
		loading9_2: false,
		imageUrl9_1: '',
		imageUrl9_2: '',
		
	}
},
computed: {
	btn(){
		return function(i){
			return this.fileIndex == i ? "layui-btn" : "layui-btn0";
		}
	},
},
methods:{
	handleChange1(info){
		console.log('handleChange1', info);
		if (info.file.status !== 'uploading') {
			console.log('handleChange1 !== uploading', info.file, info.fileList);
		}
		if (info.file.status === 'done') {
			message.success(`${info.file.name} file uploaded successfully`);
		} else if (info.file.status === 'error') {
			message.error(`${info.file.name} file upload failed.`);
		}
	},
	handleChange3(info){
		let resFileList = [...info.fileList];
		// 1. 限制上传文件的数量，仅显示两个最近上传的文件，旧文件将被新文件替换
		resFileList = resFileList.slice(-2);
		// 2. 从响应中读取并显示文件链接
		resFileList = resFileList.map(file => {
			if (file.response) {
				// 组件将显示file.url作为链接
				file.url = file.response.data.path;
			}
			return file;
		});
		this.fileList3_1 = resFileList;
	},
	
	beforeUpload6(file, fileList){
		// console.log(file, fileList);
		// return true;
		return new Promise(resolve => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => {
				const img = document.createElement('img');
				img.src = reader.result;
				img.onload = () => {
					const canvas = document.createElement('canvas');
					canvas.width = img.naturalWidth;
					canvas.height = img.naturalHeight;
					const ctx = canvas.getContext('2d');
					ctx.drawImage(img, 0, 0);
					ctx.fillStyle = 'red';
					ctx.textBaseline = 'middle';
					ctx.font = '33px Arial';
					ctx.fillText('Ant Design Vue', 20, 20);
					canvas.toBlob(resolve);
				};
			};
		});
	},
	
	beforeUpload8(file, fileList){
		// console.log(file, fileList);
		// return true;
		const isPNG = file.type === 'image/png';
		if (!isPNG) {
			message.error(`${file.name} is not a png file`);
		}
		// return isPNG || false;
		return isPNG || antd.Upload.LIST_IGNORE;
	},
	
	beforeUpload9(file, fileList){
		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		if (!isJpgOrPng) {
			message.error('只能上传 .jpg 或 .png 图片!');
		}
		const isLt2M = file.size < 1024 * 1024 * 2;
		if (!isLt2M) {
			message.error('图片必须小于 2MB!');
		}
		return isJpgOrPng && isLt2M;
	},
	handleChange9_1(info){
		if (info.file.status === 'uploading') {
			console.log('uploading');
			this.loading9_1 = true;
			return;
		}
		if (info.file.status === 'done') {
			console.log('done', info);
			getBase64(info.file.originFileObj, (base64Url) => {
				this.imageUrl9_1 = base64Url;
				this.loading9_1 = false;
			});
		}
		if (info.file.status === 'error') {
			this.loading9_1 = false;
			message.error('upload error');
		}
	},
	handleChange9_2(info){
		if (info.file.status === 'uploading') {
			console.log('uploading');
			this.loading9_2 = true;
			return;
		}
		if (info.file.status === 'done') {
			console.log('done', info);
			this.imageUrl9_2 = domain + info.file.response.data.path;
			this.loading9_2 = false;
		}
		if (info.file.status === 'error') {
			this.loading9_2 = false;
			message.error('upload error');
		}
	},
	
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
